<template>
	<div class="fixed">
		<div class="bgColor">
			<h1 class="main-shopcart">购物车</h1>
		</div>
		<div class="container">
			<div class="main">
				<div class="nav">
					<span class="nav-left">全部课程</span>
					<span class="nav-right">
						<router-link to="/about/order">
							<a href="#">查看更多订单</a>
						</router-link>
					</span>
				</div>
				<ul class="head">
					<li class="item check">
						<input type="checkbox" v-model="allChecked" @change="selectAll">全选
					</li>
					<li class="item classInfo">课程信息</li>
					<li class="item price">单价</li>
					<li class="item count">数量</li>
					<li class="item total">金额</li>
					<li class="item function">操作</li>
				</ul>
				<!-- 课程列表-有数据 -->
				<div v-if="orderList.length > 0">
					<ul class="haveorder" v-for="(item,index) in orderList" :key="index">
						<li class="order-item">
							<input type="checkbox" v-model="item.checked" @change="selectSingleProduct($event,item)">
						</li>
						<li class="order-item info">
							<div class="courseImg">
								<img :src="item.courseCover" alt="">
							</div>
							<div class="course-name">{{item.courseName}}</div>
						</li>
						<li class="order-item">￥{{item.discountPrice}}</li>
						<li class="order-item num">{{item.counter}}</li>
						<li class="order-item totalprice">￥{{ item.discountPrice * item.counter }}</li>
						<li class="order-item delete">
							<a href="" @click="deleteOrder(item.id)">
								<i>垃圾桶字体图标</i>
								<span class="delete-text">删除</span>
							</a>
						</li>
					</ul>
				</div>
				<!-- 课程列表-无数据 -->
				<div class="noOrder" v-else>
					<img src="" alt="">
					<div class="oder-alert">暂无订单！</div>
				</div>
				<div class="line">横线</div>
				<ul class="foot">
					<li class="foot-item">已选课程
						<span class="unique">{{getCount}}</span>
					</li>
					<li class="foot-item">合计
						<span class="unique">{{price}}</span>
					</li>
					<li class="foot-item">
						<button class="btn" @click="getSelecteds">去结算</button>
					</li>
				</ul>
			</div>
		</div>
	</div>
</template>

<script>
	data(){
		return{
			orderList:[],
			selectedProducts:[],
			allChecked:false,
			tokens:"",
			count:0,
			price:0
		}
	},
	created(){
		this.getShopCarList();
	},
	watch:{
		//计算商品的总价
		selectedProducts:{
			immediate:true,
			handler(newval){
				this.price = 0;
				newval.forEach((item)=>{
					this.price += item.discountPrice * item.counter
				})
			}
		}
	},
	computed:{
		getCount(){
			return this.selectedProducts.length;
		}
	},
	methods:{
		//获取购物车数据
		getShopCarList(){
			getShopCarList().then(res=>{
				this.orderList = res.data.list;
				let list = res.data.list;
				list.forEach(item =>{
					item['checked'] = true;
				})
				this.orderList = JSON.parse(JSON.stringify(list));
				this.selectedProducts = JSON.parse(JSON.stringify(list));
				this.allCheck();
			})
		}
		//全选
		selectAll(e){
			if(e){
				this.orderList.forEach(item=>{
					item['checked'] = true
				})
			}else{
				this.orderList.forEach(item=>{
					item['checked'] =false
				})
				this.selectedProducts = [];
			}
		},
		//全选状态
		allCheck(){
			if(this.orderList.length === this.selectedProducts.length){
				this.allChecked = true;
			}else{
				this.allChecked = false;
			}
		},
		//删除按钮的操作
		deleteOrder(id){
			this.$confirm('确定要删除该课程吗？','一个警告',{
				confirmButtonText:'确定',
				cancelButtonText:'取消',
				type:'warning'
			}).then(res=>{
				createToken().then(res=>{
					this.tokens = res.data.token;
					deleteShopCar({
						id:id,
						token:this.tokens
					}).then(res=>{
						this.$message({
							type:'success',
							message:'课程删除成功！'
						})
						this.getShopCarList();
					})
				})
			})
		},
		//去结算
		getSelecteds(){
			if(!this.selectedProducts || this.selectedProducts.length <=0){
				this.$message({
					type:'error',
					message:'请选择课程后，再去结算！'
				})
				return;
			}
			let arr = new Array();
			this.selectedProducts.forEach((item)=>{
				arr.push({number:item.counter,id:item.courseId})
			})
			localStorage.setItem('selectedArr',JSON.stringify(arr));
			this.$router.push('/confirmOrder')
		}
		
		
		
	}
	// playerReady(player) {
	// 	this.numberId = this.userInfo.id;
	// 	getLastHistoryByChapterId({
	// 		memberId: this.memberId, //会员id
	// 		courseId: this.courseId, //课程id
	// 		chapterId: this.chapterId //章节id
	// 	}).then(res => {
	// 		if (res.data.data != null) {
	// 			this.getLastTime = res.data.data.lastTime

	// 		}
	// 	})
	// }
	// onPlayerEnded(player) {
	// 	recordHistory({
	// 		chapterId: this.chapterId, //章节ID
	// 		courseId: this.courseId, //课程ID
	// 		memberId: this.memberId, //会员ID
	// 		lastTime: player.cache_.lastTime //上次观看时间
	// 	}).then(res=>{
	// 		console.log(res,'视频结束');
	// 	})
	// }
	// playCourse(courseId,chapterId){
	// 	playCourse(courseId,chapterId).then( res => {
	// 		if( res.meta.code == '200' ){
	// 			let playInfoList = res.data.playInfo.playInfoList;
	// 			//给视频播放组件添加地址
	// 			// 章节信息
	// 			this.chapterInfo = res.data.chapterInfo;
	// 			//视频封面图地址
	// 			this.playerOptions.poster = res.data.chapterInfo.chapterLitpic;
	// 			//章节信息
	// 			this.chapters = res.data.courseInfo.bizCourseChapters;
	// 			//课程信息
	// 			this.courseInfo = res.data.courseInfo;
	// 			//课程详情
	// 			this.courseDeatil = res.data.courseInfo.bizCourseDetail;
	// 			//老师的信息
	// 			this.courseTeacher = res.data.courseInfo.bizCourseTeacher;
	// 			//保存视频时长
	// 			this.duration = res.data.playInfo.playInfoList[0].duration;
	// 		}else if( res.meta.code == '70001' ){
	// 			this.$message({
	// 				message:res.data.msg,
	// 				type:'error'
	// 			})
	// 			this.$router.go(-1);
	// 		}
	// 	})
	// }
	// collect(){
	// 	this.isCollecte = !this.isCollecte;
	// 	createToken().then( res=>{
	// 		this.tokens = res.data.token;
	// 		//收藏
	// 		if( this.isCollecte == true ){
	// 			//添加收藏
	// 			addFavorite({
	// 				courseId:this.courseId,
	// 				token:this.tokens
	// 			}).then( res=>{
	// 				if(res.meta.code == '200'){
	// 					this.$message({
	// 						message:'收藏成功',
	// 						type:'success'
	// 					})
	// 				}
	// 			} )
	// 		//取消收藏
	// 		}else{
	// 			this.isCollecte = !this.isCollecte;
	// 			this.memberId = this.userInfo.id;
	// 			deleteFavorite({
	// 				memberId:this.memberId,
	// 				courseId:this.courseId,
	// 				token:this.tokens
	// 			}).then(res=>{
	// 				this.isCollecte = false;
	// 				this.$message({
	// 					message:'取消收藏成功！',
	// 					type:'info'
	// 				})
	// 			})
	// 		}
	// 	} )
	// }
</script>

<style scoped>
	.fixed{
		width: 100%;
		height: 100%;
		background: #ffffff;
	}
	.bgColor{
		width: 100%;
		height: 200px;
		background-color: red;
	}
	.main-shopcart{
		width: 120px;
		margin: 0 auto;
		height: 42px;
		font-size: 24px;
		line-height: 35px;
		color: #ffffff;
		opacity: 1;
	}
	.container{
		width: 1200px;
		margin:-100px auto 50px auto;
		background: #ebedf2;
		border-radius: 12px;
		box-shadow: 0px 2px 5px #888888;
	}
	.main{
		padding: 20px;
		border-radius: 5px;
	}
	.nav{
		display: flex;
		justify-content: space-between;
		border-bottom: 2px solid #e6e6e6;
	}
	.nav .nav-left{
		width: 80px;
		height: 26px;
		font-size: 18px;
		line-height: 0px;
		color: #ff4400;
		opacity: 1;
		border-bottom: 2px solid #ff4400;
	}
	.nav .nav-right{
		width: 108px;
		height: 24px;
		font-size: 14px;
		line-height: 0px;
		color: #333333;
		opacity: 0.5;
	}
	/* 头部 */
	.head{
		display: flex;
		padding: 0 10px;
		margin: 20px 0;
		width: 100%;
		height: 35px;
		line-height: 35px;
		background: #fcfcfc;
		opacity: 1;
		border-radius: 0px;
		box-sizing: border-box;
		border-radius: 5px;
		box-shadow: 0px 2px 5px 2px #cccccc;
	}
	.head .item{
		width: 150px;
		font-size: 14px;
		color: #333333;
	}
	.check .all{
		margin-right: 10px;
	}
	.check .text{
		width: 1487px;
		height: 40px;
	}
	.classInfo{
		width: 400px !important;
		color: #333333;
	}
	/* 订单 */
	.haveorder{
		display: flex;
		width: 100%;
		height: 200px;
		background: #fcfcfc;
		margin-bottom: 10px;
		border-radius: 5px;
		box-shadow: 0px 2px 5px 2px #cccccc;
	}
	.order-item{
		height: 200px;
		line-height: 200px;
		margin: 5px;
	}
	.order-item:first-child{
		width: 30px;
	}
	.order-item{
		width: 150px;
		font-size: 16px;
		color: #333333;
	}
	.totalprice{
		color: #e2231a;
	}
	.num{
		width: 120px !important;
		padding-left: 15px;
	}
	.info{
		display: flex;
		width: 470px !important;
		height: 200px;
		line-height: 200px;
	}
	.courseImg{
		margin: 40px 20px 40px 0;
		width: 200px;
		height: 120px;
	}
	.courseImg img{
		width: 100%;
		height: 100%;
	}
	.info .course-name{
		width: 300px;
		overflow: hidden;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	.delete{
		cursor: pointer;
	}
	.delete-text{
		margin-left: 5px;
	}
	/* 暂无订单 */
	.noOrder{
		width: 100%;
		height: 100%;
		text-align: center;
		margin: 200px 0;
	}
	.oder-alert{
		height: 31px;
		font-size: 20px;
		line-height: 0px;
		color: #b5b9bc;
		opacity: 1;
		margin: 20px 120px;
	}
	.foot{
		display: flex;
		justify-content: flex-end;
		width: 100%;
		height: 40px;
		line-height: 40px;
		color: #333333;
		margin-bottom: 10px;
	}
	.foot-item{
		width: 120px;
		height: 40px;
		line-height: 40px;
		font-size: 14px;
		font-weight: 400;
		color: #333333;
	}
	.unique{
		margin-left: 5px;
		font-size: 24px;
		color: #ff4400;
	}
	.btn{
		width: 120px;
		height: 40px;
		margin-left: 20px;
		border: none;
		color: #ffffff;
		font-size: 22px;
		border-radius: 5px;
		background: #ff4400;
		cursor: pointer;
		box-shadow: 0px 3px 5px 2px #ff727f;
	}
	
	
</style>
